import './global.less'
import { breadCrumb } from '@/common/components'
import Menu from '@/common/components/menu/menu'
export default {
  name: 'GlobalHeader',
  computed: {
    menuData () {
      return this.$store.getters.roles || []
    }
  },
  methods: {
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    // 退出登录
    handleLogout () {
      this.$router.push('/logout')
    }
  },
  render () {
    // 菜单
    const { menuData } = this
    // 面包屑
    const { handleLogout } = this
    this.$scopedSlots.itemRender = ({ route, params, routes }) => {
      return (
        <div class="itemRender" >
          {(routes.indexOf(route) === routes.length - 1)
            ? <span>{route.breadcrumbName} </span>
            : <a href={`#${route.path}`} > {route.breadcrumbName}</a>}
        </div>
      )
    }
    return (
      <a-layout-header
        class={['fixed-header', 'global-header']}
      >
        <div class={['global-header']}>
          <div class="header-left">
            <div class="logo" >
              <img width="32" src="img/logo.png" />
              <h1>工程模板</h1>
            </div>
            <Menu menuData={menuData} mode="horizontal" />
          </div>
          <div class="header-right">
            <span class="user-name">你好，项目经理！</span>
            <span
              class="logout"
              onClick={handleLogout}
            >
              <span class="iconfont icontuichu"></span>退出登录
            </span>
          </div>
        </div>
        <div class="breadCrumb">
          <breadCrumb {...{ scopedSlots: { ...this.$scopedSlots } }}>
            <span slot="separator">/</span>
          </breadCrumb>
        </div>
      </a-layout-header>
    )
  }
}
